<!--
 * @Author: 严晗 823841034@qq.com
 * @Date: 2023-10-17 14:26:23
 * @LastEditors: 严晗 823841034@qq.com
 * @LastEditTime: 2023-10-23 20:11:15
 * @FilePath: /yike-admin/Users/yanhan/vite-project/src/components/FormDrawer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 表单抽屉式弹出层组件，表单是在页面自定义的 -->
<template>
	<div>
		<el-drawer v-model="showDrawer" :title="title" :size="size" :close-on-click-modal="false" destroy-on-close>
			<div class="form-drawer">
				<div class="form-drawer-body">
					<slot></slot>
				</div>
				<div class="form-drawer-btn">
					<el-button type="primary" :loading="loading" @click="submit"> 提交 </el-button>
					<el-button @click="close"> 取消 </el-button>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script setup>
import { ref } from 'vue'

const showDrawer = ref(false)

// 设置props
defineProps({
	title: String,
	size: {
		type: String,
		default: '45%',
	},
})

// 开启 - 关闭 drawer
const open = () => showDrawer.value = true
const close = () => showDrawer.value = false
// 按钮loading状态
const loading = ref(false)
const showLoading = () => loading.value = true
const hideLoading = () => loading.value = false
// 向父组件暴露方法，可以通过ref进行调用
defineExpose({
	open,
	close,
  showLoading,
  hideLoading
})

// 设置emits
const emit = defineEmits(['submit'])
// 提交表单事件
const submit = () => {
	// 这里调用的emit方法需要在 defineEmits 中定义
	emit('submit')
}
</script>

<style lang="scss">
.form-drawer{
  width: 100%;
  height: 100%;
  position: relative;
  @apply flex flex-col;

  &-body{
    flex: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow-y: auto;
  }

  &-btn{
    height: 50px;
    @apply mt-auto flex items-center;
  }
}
</style>